<template>
  <div>
    <div style="overflow: hidden;" class="inputBox">
      <div style="display: inline-block;">
        <el-button type="success" size='small' @click="dialogVisible" style="margin-right:10px;">{{$t('智能生成决策')}}</el-button>
        <span>
          {{$t('有效数据')}} {{ validCount }}
        </span>
      </div>
      <div class="searchProject">
        <div style="width:160px;display: inline-block;">
          <el-input v-emoji v-model="record.filter_ip" style="margin-bottom:10px;width:155px" size='small' placeholder="IP"></el-input>
        </div>
        <div style="width:160px;display: inline-block;">
          <el-input v-emoji v-model="record.filter_port" style="margin-bottom:10px;width:155px" size='small' :placeholder="$t('端口')"></el-input>
        </div>
        <div style="width:160px;display: inline-block;">
          <!-- <div style="width: 70px;display: inline-block;">{{$t('IP类型')}}</div> -->
          <el-select v-model="record.ip_type" filterable clearable :placeholder="$t('IP类型(默认)')" style="margin-bottom:10px;width:155px" @change="ipTypeChange" size='small'>
            <el-option v-for="item in ipTypeList" :key="item.value" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="width:160px;display: inline-block;">
          <!-- <div style="width: 70px;display: inline-block;">{{$t('协议类型')}}</div> -->
          <el-select v-model="record.protocol" filterable clearable :placeholder="$t('协议类型(默认)')" style="margin-bottom:10px;width:155px" size='small'>
            <el-option v-for="item in protocolList" :key="item.PROTOCOL_NUM" :label="$t(item.PROTOCOL_NAME)" :value="item.PROTOCOL_NUM">
            </el-option>
          </el-select>
        </div>
        <div style="width:160px;display: inline-block;">
          <!-- <div style="width: 70px;display: inline-block;">{{$t('子网掩码')}}</div> -->
          <el-select v-model="record.mask" filterable clearable :placeholder="$t('子网掩码(默认)')" style="margin-bottom:10px;" :default-first-option='true' allow-create size='small' ref="mySelect" @clear="selectClear" @blur='selectBlur' @visible-change='selectChange' v-if="record.ip_type === 'ipv4'" class="maskAutocomplete">
            <div slot="prefix" style="line-height: 32px;float:right;" v-if="maskCustom">{{$t('(自定义)')}}</div>
            <el-option v-for="(item, index) in (maskList[record.ip_type] || [{value: '', label: $t('子网掩码(默认)')}])" :key="index" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="record.mask" filterable clearable :placeholder="$t('子网掩码(默认)')" style="margin-bottom:10px;width:155px" size='small' v-if="record.ip_type !== 'ipv4'">
            <el-option v-for="(item, index) in (maskList[record.ip_type] || [{value: '', label: $t('子网掩码(默认)')}])" :key="index" :label="$t(item.label)" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="width:50px;display: inline-block;">
          <el-button type="success" @click="checkData" size="small">
            <svg-icon icon-class="11C" />
          </el-button>
        </div>
      </div>
    </div>
    <el-divider style="margin: 8px 0;"></el-divider>
    <el-container class="serverContainer">
      <el-aside class="serverPaneLServer">
        <div class="serverTreeOutBorder">
          <el-tree :props="props" class="serverTreeGroup" :load="loadNode" lazy ref="serverTreeGroup" :data="groupList" node-key="id" show-checkbox @check-change="handleCheckChange" @node-click='handleNodeClick' :check-strictly='true' :default-expanded-keys='defaultExpanded'>
          </el-tree>
        </div>
      </el-aside>
      <el-aside class="serverPaneLServerChild" v-if="groupChildList.length > 0">
        <div class="serverTreeOutBorderChild">
          <el-tree :props="propsChild" class="serverTreeGroup" ref="serverChildTreeGroup" :data="groupChildList" node-key="id" show-checkbox @check-change="handleSelectionChange" @node-click='handleChildNodeClick' :check-strictly='true'>
          </el-tree>
        </div>
      </el-aside>
      <el-main class="strategyFatherBox" style="width: 100%;padding:5px 0 5px 20px;">
        <el-table size='mini' ref="multipleTable" :data="serverList" tooltip-effect="dark" style="width: 100%" :height="tableHeight">
          <!-- <el-table-column type="selection" align='center' width="55"></el-table-column> -->
          <el-table-column prop="SOURCE_IP" align='center' :label="$t('源IP')" min-width="120">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.SOURCE_IP" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="SOURCE_PORT" align='center' :label="$t('源端口')" min-width="80"></el-table-column>
          <el-table-column prop="DESTINATION_IP" align='center' :label="$t('目的IP')" min-width="120">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.DESTINATION_IP" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="DESTINATION_PORT" align='center' :label="$t('目的端口')" min-width="80"></el-table-column>
          <el-table-column prop="L4_PROTOCOL" align='center' :label="$t('协议')" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.L4_PROTOCOL.split('_')[0] }}
            </template>
          </el-table-column>
          <el-table-column prop="ORIG_COUNTER_PACKETS" align='center' :label="$t('请求包数')" min-width="100"></el-table-column>
          <el-table-column prop="REPL_COUNTER_PACKETS" align='center' :label="$t('应答包数')" min-width="100"></el-table-column>
          <el-table-column prop="START_TIMESTAMP" align='center' :label="$t('开始发包时间')" min-width="140"></el-table-column>
          <el-table-column prop="STOP_TIMESTAMP" align='center' :label="$t('结束发包时间')" min-width="140"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="form.page" :page-size="form.limit" layout="slot">
          <el-button size="mini" @click="handleCurrentChange(1)" :disabled="form.page === 1">{{$t('首页')}}</el-button>
          <el-button size="mini" @click="handleCurrentChange(form.page - 1)" :disabled="form.page === 1">{{$t('上一页')}}</el-button>
          <span style="text-align: center;">{{ form.page }}</span>
          <el-button size="mini" @click="handleCurrentChange(form.page + 1)" :disabled="serverList.length < form.limit">{{$t('下一页')}}</el-button>
        </el-pagination>
      </el-main>
    </el-container>
    <server-dialog v-if="serverDialogVisible" ref="refServerDialogVisible" @dialogReVisible='dialogReVisible'></server-dialog>
    <re-dialog v-if="reDialogVisible" ref="refReDialogVisible"></re-dialog>
  </div>
</template>
<script>
import { getServerInfoArray, getServerArray, getServerChildArray,getBMServerChildArray,getBMServerInfoArray,getBMServerClientArray, getProtocol, getServerAddrArray, getServerClientArray } from '@/api/safe/intellect/learnServer'
// import splitPane from 'vue-splitpane'
import ServerDialog from './components/ServerDialog'
import reDialog from './components/reDialog'

export default {
  name: 'server',
  // splitPane
  components: {
    ServerDialog,
    reDialog
  },
  data () {
    const { filter_ip,filter_port } = this.$route.params;
    console.log('this.$route.params',this.$route.params)
    return {
      serverDialogVisible: false,
      reDialogVisible: false,
      serverList: [],
      groupList: [],
      groupChildList: [],
      selectList: {},
      protocolIpuse: {},
      defaultExpanded: [], // tree默认展开
      highlightEvent: null,
      highlightEventChild: null,
      numId: 1,
      groupStr: [],
      groupNode: [],
      groupChildNode: [],
      record: {
        filter_ip: filter_ip || '',
        filter_port: filter_port || '',
        ip_type: '',
        mask: '',
        protocol: ''
      },
      nowRecord: {
        filter_ip: '',
        filter_port: '',
        ip_type: '',
        mask: '',
        protocol: ''
      },
      ipTypeList: [{value: '', label: 'IP类型(默认)'}, {value: 'ipv4', label: 'ipv4'}, {value: 'ipv6', label: 'ipv6'}],
      protocolList: [],
      maskList: {
        ipv4: [{value: '', label:'子网掩码(默认)'}, {value: '8', label: '8'}, {value: '16', label: '16'}, {value: '24', label: '24'}],
        ipv6: [{value: '', label: '子网掩码(默认)'}, {value: '48', label: '48'}, {value: '96', label: '96'}]
      },
      props: {
        label: 'name',
        children: 'child',
        isLeaf: 'leaf'
      },
      propsChild: {
        label: 'name',
        children: 'child'
      },
      childFlag: true, // 副树多选时判断禁止触发主树全选
      initSever: true, // 初始化判断
      nowFormName: '',
      nowFormNameId: '',
      // maskCustom: false,
      maskValue: '',
      formParents: {
        DESTINATION_IP: '',
        ipType: '',
        protocol: '',
        mask: '',
        DESTINATION_PORT: '',
        filter_ip: '',
        filter_port: ''
      },
      form: {
        serverip: '',
        clientip: '',
        ipType: '',
        protocol: '',
        mask: '',
        port: '',
        filter_ip: '',
        filter_port: '',
        page: 1,
        limit: 20
      },
      formOther: {
        type: '',
        mask: 0,
        protocol: '',
        filter_ip: '',
        filter_port: '',
        page: 1,
        limit: 20
      },
      validCount: 0,
      inputHeight: 42,
      lang: this.$i18n.locale
    }
  },
  computed: {
    // 列表动态高度
    tableHeight () {
      return window.innerHeight - 200 - this.inputHeight
    },
    maskCustom () {
      return this.maskList[this.record.ip_type].every(v => v.value !== this.record.mask)
    }
  },
  mounted () {
    getProtocol().then(res => {
      this.protocolList = res.info
      for (let item of res.info) {
        this.protocolIpuse[item.PROTOCOL_NAME] = item.PROTOCOL_NUM
      }
      this.protocolList.unshift({PROTOCOL_NAME: '协议类型(默认)', PROTOCOL_NUM: ''})
      this.protocolIpuse['协议类型(默认)'] = ''
      this.checkData()
    })
    // 列表动态高度
    const that = this
    this.inputHeight = `${document.getElementsByClassName('inputBox')[0].clientHeight}`// 默认值
    window.onresize = () => {
      // 动态赋值
      that.inputHeight = document.getElementsByClassName('inputBox')[0].clientHeight
    }
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.form.limit = val
      this.formOther.limit = val
      this.serverListData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.form.page = val
      this.formOther.page = val
      this.serverListData()
    },
    ipTypeChange () {
      this.record.mask = ''
    },
    // 搜索选项校验
    checkData () {
      if (!this.record.mask) {
        this.serverGroupData(this.record)
      } else if (!this.isInteger(this.record.mask)) {
        this.$messages.error($t('子网掩码必须是整数'))
      } else if (this.record.ip_type === 'ipv4' && !(Number(this.record.mask) === 0 || (Number(this.record.mask) >= 8 && Number(this.record.mask) <= 30))) {
        this.$messages.error($t('子网掩码的范围是0,8-30'))
      } else {
        this.serverGroupData(this.record)
      }
    },
    // 筛选按钮
    serverGroupData (data) {
      this.selectList = {}
      this.groupNode = []
      this.groupChildList = []
      this.serverList = []
      this.groupStr = []
      this.defaultExpanded = []
      this.validCount = 0;
      this.initSever = true
      this.nowRecord = {
        filter_ip: data.filter_ip,
        filter_port: data.filter_port,
        ip_type: (data.ip_type || 'all'),
        mask: (data.mask || '0'),
        protocol: data.protocol
      }
      getServerArray(this.nowRecord).then(res => {
        if(this.lang === 'en') {
          for(const item of res.info[0].child) {
            item.name = this.$t(item.name)
          }
        }
        this.groupList = res.info
        console.log(this.groupList,this.lang,'groupList');
        // 重新请求时初始化赋值用的id
        this.numId = 1
        this.defaultGroup(this.groupList)
        // 初始化打开第一个最深处的子树
        console.log('this.groupList',this.groupList)
        console.log('this',this)
        if (this.groupList && this.groupList.length > 0) {
          this.defaultExpanded.push(this.groupList[0].id)
          if (this.groupList[0].name === 'ipv4') {
            const ipv4ChildList = this.groupList[0].child.filter(item=> !["组播地址","广播地址",'Multicast address', 'Broadcast address'].includes(item.name))
            this.defaultExpanded.push(ipv4ChildList[0].id)
            this.defaultExpanded.push(ipv4ChildList[0].child[0].id)
          } else {
            this.defaultExpanded.push(this.groupList[0].child[0].id)
            this.defaultExpanded.push(this.groupList[0].child[0].child[0].id)
            
            // this.$nextTick(() => {
            //   let treeNode = document.getElementsByClassName('el-tree-node')
            //   for (let item of treeNode) {
            //     // if (item.textContent.indexOf('|') < 0) {
            //     if (['组播地址', '广播地址'].includes(item.innerText)) {
            //       item.childNodes[0].childNodes[1].style.display = 'none'
            //       item.childNodes[0].childNodes[3].style['margin-left'] = '8px'
            //     }
            //   }
            // })
          }
        }
      })
    },
    // 递归初始化数据，给每个数据增加id
    defaultGroup (data) {
      for (let index in data) {
         if (typeof data[index] === 'object') {
          data[index]['id'] = this.numId
          this.numId += 1
          this.defaultGroup(data[index].child)
        } else {
          data[index] = { name: data[index], child: [], id: this.numId }
          this.numId += 1
        }
      }
    },
    // defaultGroup (data) {
    //   for (let index in data) {
    //     if (['组播地址', '广播地址'].includes(data[index].name)) {
    //       data[index]['leaf'] = true
    //       data[index]['id'] = this.numId
    //       // data[index]['disabled'] = false
    //       this.numId += 1
    //     } else if (typeof data[index] === 'object') {
    //       data[index]['id'] = this.numId
    //       this.numId += 1
    //       this.defaultGroup(data[index].child)
    //     } else {
    //       data[index] = { name: data[index], child: [], id: this.numId }
    //       this.numId += 1
    //     }
    //   }
    // },
    // 懒加载
    loadNode (node, resolve) {
      if (node.level === 4 && ['组播地址', '广播地址','Multicast address', 'Broadcast address'].includes(node.parent.parent.label)) {
        let ip = node.parent.label.split('/')
        let record = {
          filter_ip: this.nowRecord.filter_ip,
          filter_port: this.nowRecord.filter_port,
          network_segment: ip[0],
          type: ['组播地址','Multicast address'].includes(node.parent.parent.label) ? 'multicast' : 'broadcast',
          protocol: this.protocolIpuse[node.label],
          mask: ip[1]
        }
        getBMServerChildArray(record).then(res => {
          let items = []
          // let disabled = false
          // if (this.groupNode.length > 0 && (node.parent.label !== this.groupNode[0].ipMask || node.label !== this.groupNode[0].type)) {
          //   disabled = true
          // }
          for (let item of res.info) {
            const id = Number(this.numId)
            this.numId += 1
            const name = `${item.DESTINATION_IP} | ${item.DESTINATION_PORT}`
            items.push({
              name: name,
              ipType: node.parent.parent.label,
              mask: ip[1],
              leaf: true,
              id: id,
              ipMask: node.parent.label,
              type: item.L4_PROTOCOL.split('_')[0]
              // disabled: disabled
            })
            // 初始化的时候请求第一个会话自学习子列表
            if (this.initSever) {
              this.initSever = false
              this.$nextTick(() => {
                setTimeout(() => {
                  let el = this.$refs.serverTreeGroup
                  let useEl = null
                  useEl = this.findChildTree(el.$children[0], node.childNodes[0].data.id)
                  if (useEl) {
                    useEl.click()
                  }
                }, 200)
              })
            }
          }
          return resolve(items)
        }).catch(e => {
          return resolve([])
        })
       }
      if (node.level === 3) {
        if(['组播地址', '广播地址','Multicast address', 'Broadcast address'].includes(node.parent.data.name)) {
          return resolve(node.data.child)
        }else {
        let ip = node.parent.label.split('/')
        let record = {
          filter_ip: this.nowRecord.filter_ip,
          filter_port: this.nowRecord.filter_port,
          network_segment: ip[0],
          ipType: node.parent.parent.label,
          protocol: this.protocolIpuse[node.label],
          mask: ip[1]
        }
        getServerChildArray(record).then(res => {
          let items = []
          // let disabled = false
          // if (this.groupNode.length > 0 && (node.parent.label !== this.groupNode[0].ipMask || node.label !== this.groupNode[0].type)) {
          //   disabled = true
          // }
          for (let item of res.info) {
            const id = Number(this.numId)
            this.numId += 1
            const name = `${item.DESTINATION_IP} | ${item.DESTINATION_PORT}`
            items.push({
              name: name,
              ipType: node.parent.parent.label,
              mask: ip[1],
              leaf: true,
              id: id,
              ipMask: node.parent.label,
              type: item.L4_PROTOCOL.split('_')[0]
              // disabled: disabled
            })
            // 初始化的时候请求第一个会话自学习子列表
            if (this.initSever) {
              this.initSever = false
              this.$nextTick(() => {
                setTimeout(() => {
                  let el = this.$refs.serverTreeGroup
                  let useEl = null
                  useEl = this.findChildTree(el.$children[0], node.childNodes[0].data.id)
                  if (useEl) {
                    useEl.click()
                  }
                }, 200)
              })
            }
          }
          return resolve(items)
        }).catch(e => {
          return resolve([])
        })
        }
      } else if (node.level > 0 && node.level < 3) {
        return resolve(node.data.child)
      } else {
        return resolve([])
      }
    },
    // 找到需要点击的子树
    findChildTree (child, id) {
      for (const index in child.$children) {
        if (index > 1) {
          if (child.$children[index].node && this.defaultExpanded.includes(child.$children[index].node.data.id)) {
            return this.findChildTree(child.$children[index], id)
          } else if (child.$children[index].node && child.$children[index].node.data.id === id) {
            return child.$children[index].$el
          }
        }
      }
    },
    // 用于懒加载2层和3层的数据返回
    childObject (name) {
      for (let item of this.groupList) {
        if (typeof item.child[0] === 'object') {
          if (item.name === name) {
            return item.child || []
          }
          for (let inner of item.child) {
            if (typeof inner.child[0] === 'object') {
              if (inner.name === name) {
                return inner.child || []
              }
            }
          }
        }
      }
      return []
    },
    // 点击子树时请求列表
    handleNodeClick (data, node, event) {
      this.groupChildNode = [];
      // if (['组播地址', '广播地址'].includes(node.label)) {
      //   this.highLightFun(event)
      //   this.nowFormName = data.name
      //   this.nowFormNameId = data.id
      //   this.groupChildList = []
      //   this.formOther.type = node.label === '组播地址' ? 'multicast' : 'broadcast'
      //   this.formOther.mask = this.nowRecord.mask
      //   this.formOther.protocol = this.nowRecord.protocol
      //   this.formOther.filter_ip = this.nowRecord.filter_ip
      //   this.formOther.filter_port = this.nowRecord.filter_port
      //   // getServerAddrArray
      //   this.serverListData(1)
      // }
      if (node.level > 3) {
        this.groupChildList = []
        this.nowFormName = data.name
        this.nowFormNameId = data.id
        let dataList = data.name.split(' | ')
        this.formParents.ipType = data.ipType
        this.formParents.DESTINATION_IP = dataList[0]
        this.formParents.protocol = this.protocolIpuse[data.type]
        this.formParents.mask = data.mask
        this.formParents.DESTINATION_PORT = dataList[1]
        this.formParents.filter_ip = this.nowRecord.filter_ip
        this.formParents.filter_port = this.nowRecord.filter_port
        if(!['组播地址', '广播地址','Multicast address', 'Broadcast address'].includes(node.parent.parent.data.name)) {
          this.highLightFun(event)
          this.serverParentsListData(data.ipType)
        }
      }
    },
    // 副树数据请求
    serverParentsListData (ipType) {
      let func = null;
      if(['组播地址', '广播地址','Multicast address', 'Broadcast address'].includes(ipType)) {
        func  = getBMServerClientArray
        this.formParents.type = ['组播地址','Multicast address'].includes(ipType)? 'multicast' : 'broadcast';
      }else {
        func = getServerClientArray;
      }
      func(this.formParents).then(res => {
        this.groupChildList = []
        this.serverList = []
        // 给副树初始列表值
        this.form.serverip = this.formParents.DESTINATION_IP
        this.form.ipType = this.formParents.ipType
        this.form.protocol = this.formParents.protocol
        this.form.mask = this.formParents.mask
        this.form.port = this.formParents.DESTINATION_PORT
        this.form.filter_ip = this.nowRecord.filter_ip
        this.form.filter_port = this.nowRecord.filter_port
        // -----------
        if (res.info && res.info.length > 0) {
          for (const index in res.info) {
            this.groupChildList.push({
              name: res.info[index].SOURCE_IP,
              id: Number(index) + 1,
              parent: `${this.formParents.DESTINATION_IP} | ${this.formParents.DESTINATION_PORT}`,
              ipType: this.formParents.ipType,
              protocol: this.formParents.protocol
            })
          }

          this.$nextTick(() => {
              if (this.selectList[this.nowFormName] && this.selectList[this.nowFormName].length > 0) {
              for (let item of this.selectList[this.nowFormName]) {
                this.$refs.serverChildTreeGroup.setChecked(item.id, true)
              }
            }
            this.$refs.serverChildTreeGroup.$el.children[0].click()
          })
        }
      })
    },
    // 点击副子树时请求列表
    handleChildNodeClick (data, node, event) {
      this.highLightFunChild(event)
      this.form.clientip = data.name
      this.serverListData(1)
    },
    // 点击树时高亮
    highLightFun (event) {
      if (this.highlightEvent) {
        this.highlightEvent.$el.style.color = ''
        this.highlightEvent.$el.style.fontWeight = ''
        if (this.highlightEventChild) {
          this.highlightEventChild.$el.style.color = ''
          this.highlightEventChild.$el.style.fontWeight = ''
        }
      }
      this.highlightEventChild = null
      this.highlightEvent = event
      event.$el.style.color = '#1890ff'
      event.$el.style.fontWeight = 'bold'
    },
    // 点击树时高亮
    highLightFunChild (event) {
      if (this.highlightEventChild) {
        this.highlightEventChild.$el.style.color = ''
        this.highlightEventChild.$el.style.fontWeight = ''
      }
      this.highlightEventChild = event
      event.$el.style.color = '#1890ff'
      event.$el.style.fontWeight = 'bold'
    },
    // 列表数据请求
    serverListData (page) {
      this.form.page = page || this.form.page
      this.formOther.page = page || this.formOther.page
      this.apiBranch(this.form, this.formOther, this.nowFormName).then(res => {
        if (res.info && res.info.length > 0) {
          this.serverList = res.info
        } else {
          this.serverList = []
          // this.$messages.error(this.$t('下一页没有数据'))
          // this.form.page = this.form.page === 1 ? this.form.page : this.form.page - 1
        }
      })
      // if (['组播地址', '广播地址'].includes(name)) {

      // } else {
      //   getServerInfoArray(this.form).then(res => {

      //   })
      // }
    },
    // 区分ip和广播组播地址 的请求
    apiBranch (form, formOther, name) {
      return new Promise((resolve, reject) => {
        if (['组播地址', '广播地址','Multicast address', 'Broadcast address'].includes(this.form.ipType)) {
          form.type = ['组播地址','Multicast address'].includes(this.form.ipType) ? 'multicast' : 'broadcast';
          getBMServerInfoArray(form).then(res => {
            resolve(res)
          }).catch(e => {
            reject(e)
          })
        } else {
          getServerInfoArray(form).then(res => {
            resolve(res)
          }).catch(e => {
            reject(e)
          })
        }
      })
    },
    // 树多选框改变时触发
    handleCheckChange (data, value) {
      const dataMap = {
        '组播地址':0,
        '广播地址':0,
        'Multicast address':0,
        'Broadcast address':0,
        ipv4:0,
        ipv6:1
      }
      this.groupNode = this.$refs.serverTreeGroup.getCheckedNodes()
      let groupStr = []
      for (let item of this.groupNode) {
        groupStr.push(item.name)
      }
      this.groupStr = groupStr
      // 树取消和选择时对副树进行操作
      if (data.name === this.nowFormName && this.childFlag) {
        for (let item of this.groupChildList) {
          this.$refs.serverChildTreeGroup.setChecked(item.id, value)
        }
      } else if (data.name !== this.nowFormName) {
        if (value) {
          let dataList = data.name.split(' | ')
          let form = {
            DESTINATION_IP: dataList[0],
            ipType: data.ipType,
            protocol: this.protocolIpuse[data.type],
            mask: data.mask,
            DESTINATION_PORT: dataList[1],
            filter_ip: this.nowRecord.filter_ip,
            filter_port: this.nowRecord.filter_port
          }
          let func = null;
          if(['组播地址', '广播地址','Multicast address', 'Broadcast address'].includes(data.ipType)) {
            func  = getBMServerClientArray
           form.type = ['组播地址','Multicast address'].includes(data.ipType)? 'multicast' : 'broadcast';
          }else {
            func = getServerClientArray;
          }
          func(form).then(res => {
            this.selectList[data.name] = []
            for (const index in res.info) {
              this.selectList[data.name].push({
                name: res.info[index].SOURCE_IP,
                id: Number(index) + 1,
                parent: `${form.DESTINATION_IP} | ${form.DESTINATION_PORT}`,
                ipType: form.ipType,
                protocol: form.protocol
              })
            }
            let el = this.$refs.serverTreeGroup
            let useEl = this.findTree(el.$children[dataMap[data.ipType]], data.id)
            if (useEl) {
              useEl.click()
            }
            this.countChange()
          })
        } else {
          this.selectList[data.name] = []
        }
      } else {
        this.childFlag = true
      }
      this.countChange()
    },
    // 找到需要点击的子树
    findTree (child, id) {
      let reStr = null
      for (const index in child.$children) {
        if (index > 1) {
          if (child.$children[index].node && child.$children[index].node.data.id === id) {
            return child.$children[index].$el
          } else if (child.$children[index].node) {
            reStr = this.findTree(child.$children[index], id)
            if (reStr) {
              return reStr
            }
          }
        }
      }
    },
    // 副树多选时触发
    handleSelectionChange (data) {
      // 判断列表多选框和树多选框之间的联动
      let node = this.groupChildNode || []
      this.groupChildNode = this.$refs.serverChildTreeGroup.getCheckedNodes()
      this.selectList[this.nowFormName] = this.groupChildNode
      if (this.groupChildNode.length === 1) {
        this.$refs.serverTreeGroup.setChecked(this.nowFormNameId, true)
        if (this.groupChildList.length !== 1 && node.length < this.groupChildNode.length) {
          this.childFlag = false
        }
      } else if (this.groupChildNode.length === 0) {
        this.$refs.serverTreeGroup.setChecked(this.nowFormNameId, false)
      }
      this.countChange()
    },
    // 统计无有效数据
    countChange () {
      this.validCount = 0
      for (let item of this.groupStr) {
        if (this.selectList[item]) {
          if (this.selectList[item].length > 0) {
            this.validCount += 1
          }
        }
      }
    },
    // 添加按钮表单
    dialogVisible () {
      if (this.validCount > 0) {
        this.serverDialogVisible = true
        this.$nextTick(() => {
          // 选中树（groupStr）和选中列表（selectList）数据
          this.$refs.refServerDialogVisible.init(this.groupStr, this.selectList, this.protocolList, this.groupNode[0])
        })
      } else {
        this.$messages.error(this.$t('无有效数据'))
      }
    },
    // 展示添加成功后的结果
    dialogReVisible (data) {
      this.reDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refReDialogVisible.init(data)
      })
    },
    selectClear () {
      this.record.mask = ''
      this.$forceUpdate()
    },
    isInteger (value) {
      return (!isNaN(value) && (parseInt(value).toString().length === String(Number(value)).length))
    },
    selectBlur (e) {
      if (e.target.value !== '') {
        this.record.mask = e.target.value === '子网掩码(默认)' ? '' : e.target.value
        this.$forceUpdate() // 强制更新
      }
    },
    selectChange (flag) {
      if (!flag) {
        this.$refs.mySelect.blur()
      }
    }
  }
}
</script>
<style lang="scss">
.serverTreeGroup {
  min-width: 230px;
  display: inline-block;

  .el-tree-node {
    > .el-tree-node__children {
      overflow: unset;
    }

    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }

    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }
}

.maskAutocomplete {
  width: 155px;
  .el-input--prefix .el-input__inner {
    padding-left: 15px !important;
    padding-right: 80px !important;
  }
  .el-input__prefix {
    left: 77px;
  }
}
</style>
<style lang="scss" scoped>
.serverContainer {
  height: calc(100vh - 200px);
}

.serverPaneLServer {
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-size: 18px;
  border-right: 1px solid #ddd;
  width: 241px !important;
  .serverTreeOutBorder {
    width: 280px !important;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    height: calc(100vh - 200px);
  }
}

.serverPaneLServerChild {
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-size: 18px;
  border-right: 1px solid #ddd;
  width: 231px !important;
  .serverTreeOutBorderChild {
    width: 230px !important;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    height: calc(100vh - 200px);
  }
}
.el-divider {
  margin: 8px 0 !important;
}
.searchProject {
  text-align: right;
  float: right;
}
</style>
